<template>
  <div class="app-container">
    <router-link :to="{ name: 'FlexCard', query: { nice: 12, asdf: 'sdf' } }">
      asdf
    </router-link>
    <y-table
      ref="gridRef"
      v-bind="listOptions"
      @toolbar-button-click="toolbarButtonClickEvent"
      @toolbar-tool-click="toolbarToolClickEvent"
      @radio-change="radioChangeEvent"
      @checkbox-change="checkboxChangeEvent"
      @sort-change="sortChangeEvent"
    >
      <template #xm_default="{ row }">
        <div class="text-pink-500">{{ row.userName }}</div>
      </template>

      <template #div_form="{ data }">
        <input type="text" v-model="data.div" class="border" />
      </template>
    </y-table>
    <form-dialog ref="formDialogRef"></form-dialog>
  </div>
</template>

<script>
import { getTableData, deleteMethod } from '@/api/table' // 接口

import formDialog from './components/formDialog.vue' // 表单弹窗

import listMixin from '@/mixins/listMixin' // 列表mixin

export default {
  components: { formDialog },
  mixins: [listMixin],
  data() {
    return {
      // 表格配置
      listOptions: {
        // 导出
        exportConfig: {
          fileName: '测试导出', // 文件名
          moudle: 'asdfaf' // 导出模板编码
        },
        // 导入
        importConfig: {
          module: 'BASE_DATA_COLLEGE_IMPORT' // 导入模板编码
        },
        // 默认查询数据
        defaultQueryData: {
          // form
          form: {
            passId: 'admin'
          },
          // 分页
          page: {
            pageSize: 100
          },
          // 其他查询参数
          params: {
            kdmc: '197325'
          }
        },
        // 获取数据方法
        dataMethod: getTableData,
        // 表单配置
        formOptions: {
          items: [
            {
              field: 'passId',
              title: '账号',
              itemRender: {
                name: 'VxeInput'
              }
            },
            {
              field: 'userType',
              title: '用户类别',
              itemRender: {
                name: 'ZSelect',
                props: {
                  dictCode: 'frame_user_type'
                }
              }
            },
            {
              field: 'div',
              title: '自定义查询插槽',
              slots: { default: 'div_form' }
            }
          ]
        },
        // 表格配置
        tableOptions: {
          radioConfig: {
            // 显示条件
            // visibleMethod({ row }) {
            //     return row.qq >= '11'
            // }
          },
          // 不启用分页
          // pagerConfig:{
          //     enabled:false,
          // },
          rowConfig: {
            keyField: 'userId'
          },
          toolbarConfig: {
            // 按钮组
            buttons: [
              {
                name: '新增',
                code: 'add',
                status: 'primary',
                icon: 'vxe-icon-add'
              },
              {
                name: '【单选】获取选中',
                code: 'getRadioRow',
                status: 'warning'
              },
              {
                name: '【单选】设置 userId 为 61E92EF67418DC54 的数据被选中',
                code: 'check',
                status: 'success'
              },
              { name: '【单选】取消选中', code: 'clear' },
              {
                name: '【多选】获取选中',
                code: 'getCheckboxRow',
                status: 'warning'
              },
              {
                name: '【多选】设置 userId 为 61E92EF67418DC54 的数据被选中',
                code: 'checkbox',
                status: 'success'
              },
              { name: '【多选】取消选中', code: 'clearbox' }
            ],
            // 工具栏
            tools: [
              {
                type: 'button',
                code: 'DivCode',
                icon: 'vxe-icon-edit',
                circle: true
              }
            ]
          },
          // 表格列
          columns: [
            { type: 'seq', width: 60 },
            { type: 'checkbox', width: 60 },
            { type: 'radio', width: 60 },
            {
              field: 'passId',
              title: '账号',
              cellRender: {
                name: 'link',
                props: {
                  href: (row) => 'https://www.baidu.com',
                  target: '_blank'
                }
              }
            },
            {
              field: 'userName',
              title: '姓名',
              sortable: true,
              slots: { default: 'xm_default' }
            },
            // userId
            {
              field: 'userId',
              title: '用户Id',
              sortable: true
            },
            {
              field: 'userImg',
              title: '图片',
              cellRender: {
                name: 'image'
              }
            },
            {
              field: 'userType',
              title: '用户类别（字典 dictCode）',
              dictCode: 'frame_user_type'
            },
            {
              title: '操作',
              cellRender: {
                name: 'buttons',
                options: [
                  { content: '详情', name: 'detail' },
                  { content: '修改', name: 'edit' },
                  {
                    content: '更多',
                    dropdowns: [
                      { content: '删除', name: 'delete' },
                      { content: '审核', name: 'audit' }
                    ]
                  }
                ],
                events: {
                  click: ({ name, row }) => {
                    switch (name) {
                      case 'detail':
                        this.openFormDialog({
                          row: {
                            ...row,
                            upload:
                              '8de3bd34-b940-4dbd-930d-6c63c7683b841740537578868',
                            myUserId: '61E92EF67418DC54,F217AD780F5029CF',
                            myUserName: 'admin1,郑磊'
                          },
                          refName: 'formDialogRef',
                          type: 'detail'
                        })
                        break
                      case 'edit':
                        this.openFormDialog({ row, refName: 'formDialogRef' })
                        break
                      case 'delete':
                        this.deleteRow({ row, deleteMethod })
                        break
                      case 'audit':
                        // this.audit(row)
                        break
                      default:
                        break
                    }
                  }
                }
              }
            }
          ]
        }
      }
    }
  },
  /**
   * 组件挂载时异步执行的方法
   */
  async mounted() {
    // 动态设置查询参数
    // 此处的目的是根据某些条件或逻辑动态地设置组件的查询参数，以便在加载数据前做好准备
    await this.setFormQuery()

    // 加载数据
    // 通过refs引用调用loadData方法来加载数据
    this.$refs.gridRef.loadData()
  },
  methods: {
    /**
     * 处理单选按钮变化事件的函数
     *
     * @param {Object} row - 表示行数据的对象
     */
    radioChangeEvent(row) {
      // 输出选中行的数据到控制台
      console.log(row)
    },
    /**
     * 处理复选框变化事件
     * @param {Array} rows - 选中的行数据数组
     */
    checkboxChangeEvent(rows) {
      // 输出选中的行数据，以便在控制台中查看
      console.log(rows)
    },
    // 排序事件
    sortChangeEvent({ field, order }) {
      this.$set(this.listOptions.defaultQueryData.params, 'sortField', field)
      this.$set(this.listOptions.defaultQueryData.params, 'sortOrder', order)

      this.$refs.gridRef.loadData()
    },
    /**
     * 工具栏按钮点击事件处理函数
     * @param {Object} event - 事件对象，包含按钮代码
     * 该函数根据点击的工具栏按钮代码，执行不同的操作
     */
    toolbarButtonClickEvent({ code }) {
      switch (code) {
        case 'add':
          // 执行添加操作，打开表单对话框
          this.openFormDialog({
            refName: 'formDialogRef',
            row: {
              keywords: '吾乃哪吒三太子',
              popup: null,
              myName: ['小琴']
            }
          })
          break
        case 'getRadioRow':
          // 获取选中的行数据
          this.getRadioRow()
          break
        case 'check':
          // 设此处硬编码了一个示例ID
          this.setCheck('61E92EF67418DC54')
          break
        case 'clear':
          // 清除选中的行数据
          this.clearRadioRow()
          break
        case 'getCheckboxRow':
          // 获取选中的行数据
          this.getCheckboxRow()
          break
        case 'checkbox':
          // 此处硬编码了一个示例ID
          this.setCheckBox(['61E92EF67418DC54'])
          break
        case 'clearbox':
          // 清除选中的行数据
          this.clearCheckboxRow()
          break
      }
    },
    toolbarToolClickEvent({ code }) {
      switch (code) {
        case 'DivCode':
          this.$message.success(`code：${code},自定义工具`)
          break
      }
    },
    async setFormQuery() {
      // this.listOptions.defaultQueryData.form.userType = 'admin'
    },
    setCheck(key = '') {
      this.$refs.gridRef.setRadioRow({
        userId: '988F90A9D559A608'
      })
    },
    setCheckBox(keys = []) {
      this.$refs.gridRef.setCheckboxRowKey(keys)
    },
    clearRadioRow() {
      this.$refs.gridRef.clearRadioRow()
    },
    clearCheckboxRow() {
      this.$refs.gridRef.clearCheckboxRow()
    },
    getRadioRow() {
      const Record = this.$refs.gridRef.getSelectRecord('radio')
      this.$message.success(JSON.stringify(Record))
    },
    getCheckboxRow() {
      const Record = this.$refs.gridRef.getSelectRecord()
      this.$message.success(JSON.stringify(Record))
    }
  }
}
</script>

<style lang="scss" scoped></style>
